<!--
########################################################################                                                                 
# Program Name: Browser_Client_Coder.html                                     
# ================================     
# This code is for controlling a robot by a web browser using web sockets                            
# http://www.dexterindustries.com/                                                                
# History
# ------------------------------------------------
# Author             Comments
# 奇果派工坊                                                              
# These files have been made available online through a Creative Commons Attribution-ShareAlike 3.0  license.
# (http://creativecommons.org/licenses/by-sa/3.0/)           
#
########################################################################
-->
<!-- This code implements the web socket connection between client(web page on a Computer) and a server(raspberry pi) -->
<!-- It sends data from web page using buttons and Keyboard presses to control the BrickPi robot -->

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>ArmRobot Client</title>  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script src="./jquery.ui.touch-punch.min.js"></script>
  <script src="./websocket.js"></script>
</head>
<body>
<p> 请输入服务器地址： </p>
    <input type="text" id="url" size="30"  value="192.168.1.77"> 
    <input id="connect" type="button" value="连接"  />         
<!-- Creating CAR buttons  on the webpage-->                               
<input id="accelerate" style="height: 100px; width: 100px; position: absolute; left: 150px; top: 100px" type="button" value="前进" />
</p>

<p>                                        
<input id="steer_left" style="height: 100px; width: 100px; position: absolute; left: 50px; top: 200px" type="button" value="左转"  />
</p>

<p>                                        
<input id="stop" style="height: 100px; width: 100px; position: absolute; left: 150px; top: 200px" type="button" value="停止"  />
</p>

<p>                                        
<input id="steer_right" style="height: 100px; width: 100px; position: absolute; left: 250px; top: 200px" type="button" value="右转" />
</p>

<p>                                        
<input id="reverse" style="height: 100px; width: 100px; position: absolute; left: 150px; top: 300px" type="button" value="后退" />
</p>




<p>            
<!-- Creating ARM buttons  on the webpage--> 
<div id="leb-claw" style="position: absolute; left: 440px; top: 80px">claw</div>
<div id="slider-claw" style="height:300px;position: absolute; left: 450px; top: 100px"></div>
<div id="leb-waist" style="position: absolute; left: 540px; top: 80px">waist</div>
<div id="slider-waist" style="height:300px;position: absolute; left: 550px; top: 100px"></div>
<div id="leb-left" style="position: absolute; left: 640px; top: 80px">left</div>
<div id="slider-left" style="height:300px;position: absolute; left: 650px; top: 100px"></div>
<div id="leb-right" style="position: absolute; left: 740px; top: 80px">right</div>
<div id="slider-right" style="height:300px;position: absolute; left: 750px; top: 100px"></div>

<div id="output">适用手机横屏模式</div>
<div id="dialog-confirm" title="提示">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span id="dialog-msg" >加载中...</span></p>
</div>

</body>
</html>
<script>   
	//setInterval("",1000);
jQuery(function($)
{
 //检测浏览器是否支持websocket
  if (!("WebSocket" in window)) 
  {
    alert("Your browser does not support web sockets");
  }
  
  //提示框
  $( "#dialog-confirm" ).dialog({
      autoOpen: false,
      resizable: false,
      height:240,
      modal: true,
      buttons: {
        "OK": function() {
          $( this ).dialog( "close" );
        }
      }
    });
  
  //连接服务器
  $("#connect").on('click',function(e){
  	var url = $("#url").val();      			// assigns the data(hostname/ip address) entered in the text box
	var host =  "ws://"+url+":9093/ws"; 	// combines the three string and creates a new string
     	initWebSocket(host);  
  });
  
  //方向按钮
    $("#accelerate").on('click',function(e){
  	  var event = {
		eventType:8,
		eventValue:0
	};
	doSend(event);
  });
    $("#steer_left").on('click',function(e){
    	  var event = {
		eventType:6,
		eventValue:0
	};
	doSend(event);
  });
    $("#stop").on('click',function(e){
    	  var event = {
		eventType:5,
		eventValue:0
	};
	doSend(event);
  });
    $("#steer_right").on('click',function(e){
    	  var event = {
		eventType:4,
		eventValue:0
	};
	doSend(event);
  });
  
    $("#reverse").on('click',function(e){
    	  var event = {
		eventType:2,
		eventValue:0
	};
	doSend(event);
  });
  
  
  
  $( "#slider-claw" ).slider({
      orientation: "vertical",
      range: "min",
      min: 5,
      max: 95,
      value: 90,
      slide: function( event, ui ) {
        //$( "#amount" ).val( ui.value );
        //alert(ui.value);
       var event = {
		eventType:1,
		eventValue:ui.value
	};
	doSend(event);
      }
    });
    
    $( "#slider-waist" ).slider({
      orientation: "vertical",
      range: "min",
      min: 10,
      max: 170,
      value: 90,
      slide: function( event, ui ) {
         var event = {
		eventType:3,
		eventValue:ui.value
	};
	doSend(event);
      }
    });
    
    $( "#slider-left" ).slider({
      orientation: "vertical",
      range: "min",
      min: 10,
      max: 110,
      value: 90,
      slide: function( event, ui ) {
         var event = {
		eventType:7,
		eventValue:ui.value
	};
	doSend(event);
      }
    });
    
    $( "#slider-right" ).slider({
      orientation: "vertical",
     // range: "min",
      min: 45,
      max: 135,
      value: 90,
      slide: function( event, ui ) {
        //$( "#amount" ).val( ui.value );
         var event = {
		eventType:9,
		eventValue:ui.value
	};
	doSend(event);
      }
    });
  
});

</script>